<template>
  <div class="show-song">
    <div class="show-left">
      <div class="show-img">
        <el-image :src="songDetail.picUrl" alt="" lazy />
      </div>
    </div>
    <div class="show-right">
      <!-- 1 -->
      <div class="show-top">
        <div class="img"></div>
        <div class="title" style="font-size: 24px">
          {{ songDetail.songName }}
        </div>
        <!-- mv -->
        <div
          v-if="songDetail.mv"
          class="mv-icon"
          @click="toMv(songDetail.mv)"
        ></div>
      </div>

      <!-- 2 -->
      <p class="p1">
        歌手：<a href="javascript:;">{{ songDetail.singer }}</a>
      </p>
      <!-- 3 -->
      <p class="p2">
        所属专辑：<a href="javascript:;">{{ songDetail.al }}</a>
      </p>
      <!-- 4 -->
      <common-button>
        <div class="play" @click="playList()" slot="play">播放</div>
        <i slot="comment"> ({{ total }}) </i>
      </common-button>
      <!-- 5 -->
      <!-- 歌词 -->
      <p class="lrc" ref="more">
        {{ lyric }}
      </p>
      <div class="btn" for="exp" @click="more">
        {{ moreIndex ? '收起' : '展开' }}
      </div>
    </div>
  </div>
</template>

<script>
import { getSongURL } from '@/api/api.js'
import CommonButton from '../../../components/common/commonButton.vue'
export default {
  components: {
    CommonButton
  },
  data() {
    return {
      moreIndex: false
    }
  },
  props: {
    songDetail: {
      type: Object,
      default() {
        return {}
      }
    },
    lyric: {
      type: String
    },
    total: {
      type: Number
    },
    comments: {
      type: Array,
      default() {
        return []
      }
    }
  },
  created() {},
  methods: {
    toMv(id) {
      this.$router.push({
        path: '/mv',
        query: {
          id: id
        }
      })
    },
    async playList() {
      const { data: res } = await getSongURL(this.songDetail.id)
      console.log(res)
      this.$store.commit('savaSongURL', [])
      this.$store.commit('savaSongURL', [res[0].url])
    },
    // 展开
    more() {
      var a
      if (
        this.$refs.more.innerHTML.length <= 500 &&
        this.$refs.more.innerHTML.length >= 100
      ) {
        a = `${this.$refs.more.innerHTML.length}px`
      } else if (this.$refs.more.innerHTML.length <= 60) {
        a = '60px'
      } else if (this.$refs.more.innerHTML.length >= 600) {
        a = `${this.$refs.more.innerHTML.length}px`
      }
      this.moreIndex = !this.moreIndex

      this.moreIndex === false
        ? (this.$refs.more.style.height = '150px')
        : (this.$refs.more.style.height = a)
      document.body.scrollTop = 300
    }
  }
}
</script>

<style lang="scss" scoped>
.mv-icon {
  width: 21px;
  height: 18px;
  margin-left: 3px;
  background: url('https://s2.music.126.net/style/web2/img/icon.png?e3b35dd9ab5d5a0f4188e020e832a355')
    no-repeat 0 9999px;
  background-position: 0 -18px;
  &:hover {
    cursor: pointer;
  }
}
a {
  color: #0c73c2;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
.show-song {
  width: 640px;
  display: flex;
  .show-left {
    margin-right: 30px;
    width: 206px;
    .show-img {
      width: 100%;
      height: 205px;
      background: url('https://s2.music.126.net/style/web2/img/coverall.png?d473f937101bde599087f0bf2d886e0d');
      background-position: -140px -580px;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-image {
        width: 130px;
        height: 130px;
        display: inline-block;
        border-radius: 50%;
      }
    }
  }
}
.show-top {
  display: flex;
  align-items: center;
  .img {
    margin-right: 10px;
    width: 54px;
    height: 24px;
    background: url('https://s2.music.126.net/style/web2/img/icon.png?f3b9eb035cfaa5e1304d1fec5c8374da')
      no-repeat 0 9999px;
    background-position: 0 -463px;
  }
}
.lrc {
  width: 120px;
  margin-top: 20px;
  height: 150px;
  overflow: hidden;
}
.btn {
  color: #2979c7;
  &:hover {
    cursor: pointer;
  }
}
.p1 {
  margin: 10px 0;
}
.p2 {
  margin: 10px 0;
}
</style>
